import React, { useState } from 'react'
import { View, Text } from '@tarojs/components'
import { Button, ConfigProvider, Tabs, TabPane } from '@nutui/nutui-react-taro'
import './index.scss'

function Campsite() {
  const [viewMode, setViewMode] = useState<'map' | 'list'>('map')
  const [campsites] = useState([
    {
      id: 1,
      name: '青山绿水营地',
      address: '北京市怀柔区某某镇某某村',
      latitude: 40.364,
      longitude: 116.135,
      price: 200,
      rating: 4.8,
      facilities: ['停车场', 'WiFi', '淋浴', '烧烤']
    },
    {
      id: 2,
      name: '森林湖畔营地',
      address: '北京市密云区某某镇某某村',
      latitude: 40.435,
      longitude: 116.846,
      price: 180,
      rating: 4.6,
      facilities: ['停车场', '淋浴', '厕所', '餐饮']
    },
    {
      id: 3,
      name: '星空露营基地',
      address: '河北省承德市某某区某某镇',
      latitude: 41.023,
      longitude: 117.935,
      price: 150,
      rating: 4.5,
      facilities: ['停车场', '帐篷出租', '烧烤', '户外活动']
    }
  ])
  
  const handleViewModeChange = (mode: 'map' | 'list') => {
    setViewMode(mode)
  }

  const renderMapView = () => {
    return (
      <View className='map-container'>
        <View className='map-placeholder'>
          <Text>地图模式（加载中...）</Text>
          {campsites.map(site => (
            <View key={site.id} className='map-marker'>
              <Text>{site.name}</Text>
              <Text>位置: {site.latitude}, {site.longitude}</Text>
            </View>
          ))}
        </View>
      </View>
    )
  }

  const renderListView = () => {
    return (
      <View className='list-container'>
        {campsites.map(site => (
          <View className='campsite-card' key={site.id}>
            <View className='campsite-info'>
              <Text className='campsite-name'>{site.name}</Text>
              <Text className='campsite-address'>{site.address}</Text>
              <Text className='campsite-price'>¥{site.price}/晚</Text>
              <View className='campsite-rating'>
                <Text>{site.rating}</Text>
                <Text className='star-icon'>⭐</Text>
              </View>
              <View className='campsite-facilities'>
                {site.facilities.map((facility, index) => (
                  <Text className='facility-tag' key={index}>{facility}</Text>
                ))}
              </View>
            </View>
          </View>
        ))}
      </View>
    )
  }

  return (
    <ConfigProvider>
      <View className='campsite-page'>
        <View className='view-mode-switcher'>
          <Button 
            type={viewMode === 'map' ? 'primary' : 'default'}
            onClick={() => handleViewModeChange('map')}
          >
            地图模式
          </Button>
          <Button 
            type={viewMode === 'list' ? 'primary' : 'default'}
            onClick={() => handleViewModeChange('list')}
          >
            列表模式
          </Button>
        </View>

        {viewMode === 'map' ? renderMapView() : renderListView()}
      </View>
    </ConfigProvider>
  )
}

export default Campsite 